<template>
  <div>
    <div>
      <!-- 查询部分 -->
      <div class="mg-0_5em">
        <el-form :inline="true" :model="categoryQuery" ref="categoryQueryRef" class="demo-form-inline">
          <el-form-item label="名称" prop="categoryName">
            <el-input v-model="categoryQuery.categoryName" placeholder="名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="initCategoryList">查询</el-button>
            <el-button type="success" :icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- table部分 -->
      <div class="mg-0_5em">
        <div class="w-100 mb-0_5em flex-container flex-row-left">
          <el-button type="primary" :icon="CirclePlus" @click="switchDialog"> 新增分类</el-button>
        </div>
        <el-table :data="categoryList" border ref="tableRef" row-key="id">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="categoryName" label="分类名称" align="center" />
          <el-table-column prop="categoryDesc" label="分类描述" align="center" />
          <el-table-column prop="createTime" label="创建时间" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <div>
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="Delete"
                  icon-color="red"
                  title="确定删除?"
                  @confirm="deleteCategory(row.id)">
                  <template #reference>
                    <div>
                      <el-button type="danger" size="small" :icon="Delete">删除</el-button>
                    </div>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页部分 -->
      <div class="mr-0_5em mt-1em flex-container flex-row-right">
        <pagination ref="paginationRef" @change="initCategoryList"></pagination>
      </div>
    </div>
    <!-- 新增弹框 -->
    <div>
      <el-dialog v-model="showDialog" title="新增分类" width="40%" center>
        <el-form :model="categoryDTO" ref="categoryDTORef" :label-width="100" label-position="left">
          <el-form-item label="分类名称" prop="categoryName" :rules="required">
            <el-input v-model="categoryDTO.categoryName" placeholder="分类名称"></el-input>
          </el-form-item>
          <el-form-item label="分类描述" prop="categoryDesc" :rules="required">
            <el-input v-model="categoryDTO.categoryDesc" placeholder="分类描述" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="switchDialog()"> 取 消 </el-button>
            <el-button type="primary" @click="add">提 交</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { CirclePlus, Delete, Refresh, Search } from '@element-plus/icons-vue'
import Pagination from '@/components/Pagination/index.vue'
import Category from '@/api/blog/category'
import { required } from '@/utils/FormRule'

// 生命周期, 初始化数据
onMounted(() => {
  initCategoryList()
})

// 查询条件
const categoryQuery = ref({
  categoryName: '',
})

// 分类数据
const categoryList = ref([])

// 分页组件
const paginationRef = ref()

/**
 * 初始化列表
 */
async function initCategoryList(pageInfo) {
  if (!pageInfo) {
    pageInfo = { current: 1, size: 10, total: 0 }
  }
  pageInfo.condition = categoryQuery.value
  const { result } = await Category.page(pageInfo)
  const { total, records } = result
  categoryList.value = records
  paginationRef.value.changeTotal(total, pageInfo.size)
}

// 查询条件表单
const categoryQueryRef = ref()
// 重置查询条件
function resetQuery() {
  let pageInfo = { current: 1, size: 10, total: 0 }
  categoryQueryRef.value.resetFields()
  initCategoryList(pageInfo)
}

// 弹框开关
const showDialog = ref(false)

// 分类参数
const categoryDTO = ref({
  categoryName: '',
  categoryDesc: '',
})
// 新增表单Form
const categoryDTORef = ref()

// 弹框开关
function switchDialog() {
  categoryDTORef.value !== undefined && categoryDTORef.value.resetFields()
  showDialog.value = !showDialog.value
}

const emits = defineEmits(['success'])

// 新增一个分类
function add() {
  categoryDTORef.value.validate(async (valid) => {
    if (valid) {
      await Category.create(categoryDTO.value)
      switchDialog()
      await initCategoryList()
    }
  })
}
// 删除一个分类
function deleteCategory(id) {
  Category.delete(id).then(({ code }) => {
    if (code === 200) {
      initCategoryList()
    }
  })
}
</script>

<style scoped lang="scss"></style>
